<template>
	<view class="notice">
		<!-- S 顶部导航 -->
		<sol-navbar title="通知小助手">
			<template v-slot:right>
				<image class="notice-naver_right-icon" src="/static/icon-message/icon_clear.png" mode="scaleToFill"
					@click="fnClearEvent('open')">
				</image>
			</template>
		</sol-navbar>
		<!-- E 顶部导航 -->

		<!-- S 列表项 -->
		<view class="notice-item">
			<view class="notice-item_header">
				<sol-image class="notice-item_header-icon" width="90rpx" height="90rpx"
					src="https://dummyimage.com/200x200"></sol-image>
				<view class="notice-item_header-info">
					<text class="notice-item_header-info_name">系统通知</text>
					<text>2分钟前</text>
				</view>
			</view>
			<view class="notice-item_text">
				后期活动名称及海报〈预留〉
			</view>
			<view class="notice-item_content">
				<sol-image class="notice-item_content-image" width="" height="300rpx"
					src="https://dummyimage.com/200x200"></sol-image>
				<!-- <view class="notice-item_content-box">
					也许爱不是热情，也不是怀念，不过是岁月，年深月久成了生活的一部分。
				</view>
				<view class="notice-item_content-box notice-item_content-like">
					点击我前往 >>
				</view> -->
			</view>
		</view>
		<view class="notice-item">
			<view class="notice-item_header">
				<sol-image class="notice-item_header-icon" width="90rpx" height="90rpx"
					src="https://dummyimage.com/200x200"></sol-image>
				<view class="notice-item_header-info">
					<text class="notice-item_header-info_name">Memories</text>
					<text>2分钟前</text>
				</view>
			</view>
			<view class="notice-item_text">
				订阅了你的频道
			</view>
		</view>
		<view class="notice-item">
			<view class="notice-item_header">
				<sol-image class="notice-item_header-icon" width="90rpx" height="90rpx"
					src="https://dummyimage.com/200x200"></sol-image>
				<view class="notice-item_header-info">
					<text class="notice-item_header-info_name">暮年</text>
					<text>22分钟前</text>
				</view>
			</view>
			<view class="notice-item_text">
				点赞了你的留言
			</view>
			<view class="notice-item_content">
				<view class="notice-item_content-box">
					也许爱不是热情，也不是怀念，不过是岁月，年深月久成了生活的一部分。
				</view>
			</view>
		</view>
		<view class="notice-item">
			<view class="notice-item_header">
				<sol-image class="notice-item_header-icon" width="90rpx" height="90rpx"
					src="https://dummyimage.com/200x200"></sol-image>
				<view class="notice-item_header-info">
					<text class="notice-item_header-info_name">系统通知</text>
					<text>23分钟前</text>
				</view>
			</view>
			<view class="notice-item_text">
				您未设置主页访问限制
			</view>
			<view class="notice-item_content">
				<view class="notice-item_content-box notice-item_content-like">
					点击我前往 >>
				</view>
			</view>
		</view>
		<!-- E 列表项 -->

		<!-- S 清除留言 -->
		<sol-drawer v-model="clearOpen" primary-text="是的,确认" cancel-text="取消" @click="fnClearEvent">
			<template v-slot:default>
				<view class="clear">
					<text class="clear-title">确认清空吗？</text>
					<text class="clear-explain">清空后无法找回</text>
				</view>
			</template>
		</sol-drawer>
		<!-- E 清除留言 -->

	</view>
</template>

<script>
	export default {
		name: "Notice",
		data() {
			return {
				// 清除弹出层
				clearOpen: false,
			};
		},
		computed: {},
		methods: {
			// 清除弹出层事件
			fnClearEvent(type = '', value = 0) {
				this.$log(this.$options.name, type, value);
				switch (type) {
					case 'open': // 打开
						this.clearOpen = true;
						break;
					case 'mask': // 遮罩
					case 'cancel': // 取消
						this.clearOpen = false;
						break;
					case 'primary': // 确认
						break;
				}
			},

		}
	}
</script>

<style lang="scss">
	.notice {
		min-height: 100vh;
		background-color: $--color-background;

		// 顶部栏
		&-naver_right-icon {
			width: 48rpx;
			height: 44rpx;
			padding: 14rpx 28rpx 14rpx 24rpx;
			display: block;
			overflow: hidden;
		}

		&-item {
			padding: 0 28rpx 28rpx;

			&_header {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;

				&-icon {
					width: 90rpx;
					height: 90rpx;
					display: block;
					border-radius: 50%;
					overflow: hidden;
				}

				&-info {
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
					font-size: 24rpx;
					font-weight: 400;
					color: #878787;
					padding: 28rpx;

					&_name {
						font-size: 28rpx;
						font-weight: 400;
						color: #BBBBBB;
						margin-bottom: 12rpx;
					}
				}
			}

			&_text {
				font-size: 32rpx;
				font-weight: 400;
				color: #DDDDDD;
				letter-spacing: 4rpx;
			}

			&_content {
				padding-top: 12rpx;

				// 图片
				&-image {
					height: 300rpx;
					width: 100%;
					border-radius: 12rpx;
					overflow: hidden;
				}

				// 消息盒子
				&-box {
					padding: 28rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #878787;
					border-radius: 12rpx;
					background-color: #474e54;

				}

				// 跳转项
				&-like {
					color: #F2BF2F;
				}
			}
		}

		// 清除说明
		.clear {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;

			&-title {
				font-size: 48rpx;
				font-weight: bold;
				color: #DDDDDD;
				letter-spacing: 8rpx;
				margin-bottom: 18rpx;
			}

			&-explain {
				font-size: 28rpx;
				font-weight: 400;
				color: #878787;
			}
		}
	}
</style>
